<template>
  <el-table
      :data="tableData"
      style="width: 100%"
      :fit="true"
      border
      :header-cell-style="{ textAlign: 'center' }"
  >
    <el-table-column
        label=""
        width="40px">
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.enable" />
      </template>
    </el-table-column>
    <el-table-column
        prop="key"
        label="key">
      <template slot-scope="scope">
        <el-input size="small" @focus="onInputFocus" @blur="onInoutBlur" @input="onInput(scope.$index)" v-model="scope.row.key" />
      </template>
    </el-table-column>
    <el-table-column
        prop="value"
        label="value">
      <template slot-scope="scope">
        <el-input size="small" @focus="onInputFocus" @blur="onInoutBlur" @input="onInput(scope.$index)" v-model="scope.row.value" />
      </template>
    </el-table-column>
    <el-table-column
        prop="opr"
        width="80px"
        label="操作">
      <template slot-scope="scope">
        <div style="text-align: center">
          <el-button icon="el-icon-delete" circle @click="delRow(scope.$index)"></el-button>
        </div>
      </template>
    </el-table-column>

  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: this.data,
    };
  },
  props: {
    data: { type: Array, required: true },
  },
  methods: {
    onInputFocus(e) {
      let input = e.target;
      if (
        input.parentNode &&
        input.parentNode.parentNode &&
        input.parentNode.parentNode.tagName === "TR"
      ) {
        let tr = input.parentNode.parentNode;
        tr.classList.add("highlight");
      }
    },
    onInoutBlur(e) {
      let input = e.target;
      if (
        input.parentNode &&
        input.parentNode.parentNode &&
        input.parentNode.parentNode.tagName === "TR"
      ) {
        let tr = input.parentNode.parentNode;
        tr.classList.remove("highlight");
      }
    },
    onInput(index) {
      if (index + 1 === this.tableData.length) {
        // 最后一行
        this.tableData.push({
          enable: true,
          key: "",
          value: "",
          desc: "",
        });
      }
    },
    delRow(index) {
      if (this.tableData.length === 1 || this.tableData.length - 1 === index) {
      } else {
        this.$delete(this.tableData, index);
      }
    },
  },
};
</script>

<style lang="less" scoped>


.delBtn {
  cursor: pointer;
}
</style>